<template>
    <div class="associate-wrap">
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="font-size:13px;color:#999; margin-bottom: 10px;">所有管理员：</div>
                <div class="associate-table-wrap">
                    <el-table size="mini" class="m-table"
                        :data="list"
                        height="450"
                        ref="multipleTable"
                        row-key="id"
                        @select="select"
                        @select-all="selectAll"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            prop="loginname"
                            label="登录名">
                        </el-table-column>
                        <el-table-column
                            prop="nickname"
                            label="昵称">
                        </el-table-column>
                        <!--<el-table-column
                            prop="type"
                            label="类型">
                            <template slot-scope="scope">
                                {{ scope.row.type == 'SUPER' ? '超级管理员': '管理员' }}
                            </template>
                        </el-table-column>-->
                    </el-table>
                </div>
                <el-pagination
                    @size-change="refresh"
                    @current-change="refresh"
                    :current-page.sync="pagination.current"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size.sync="pagination.pageSize"
                    layout="total, prev, pager, next"
                    :total="pagination.total">
                </el-pagination>
            </el-col>
            <el-col :span="12">
                <div style="font-size:13px;color:#999; margin-bottom: 10px;">本次分配管理员：</div>
                <el-table size="mini" class="m-table"
                    :data="allSelected"
                    height="450"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="loginname"
                        label="登录名">
                    </el-table-column>
                    <el-table-column
                        prop="nickname"
                        label="昵称">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        width="60"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                @click="handleRemove(scope.row, scope.$index)">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div class="btns" style="text-align: right;">
            <el-button type="primary" @click="submit()">确 定</el-button>
            <el-button @click="close()">取 消</el-button>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';
    import cCreate from './role-create.vue';

    export default {
        props: [ 'rid', 'show' ],
        data() {
            return {
                list: [],
                loading: false,
                selected: [],
                currentSelected: [],
                pagination: {
                    current: 1,
                    pageSize: 50,
                    total: 0
                },
            }
        },
        components: {

        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            // this.groupId = this.$route.params.groupId;
            // this.init();
            this.init();
        },
        watch: {
            'show'(val) {
                if(val) {
                    this.init();
                }
            }
        },
        computed: {
            ...mapState([

            ]),
            'allSelected'() {
                return _.concat(this.currentSelected, this.selected);
            }
        },
        methods: {
            ...mapActions([
            ]),
            init() {
                this.pagination.current = 1;
                this.selected = [];
                this.currentSelected = [];
                this.refresh();
            },
            async refresh() {

                let data = await this.$japi.admin.getAdminList({
                    page: this.pagination.current,
                    pageSize: this.pagination.pageSize
                });

                if(data) {
                    this.pagination.total = data.count;
                    this.list = data.rows || [];
                    this.formatSelected();
                }
            },
            async submit() {
                if(!this.allSelected || !this.allSelected.length) {
                    this.$message('请先选择用户！');
                    return;
                }

                this.loading = true;

                let users = _.map(this.allSelected, 'id');
                let data = await this.$japi.role.associateUsers(this.rid, users);

                this.loading = false;

                if(data) {
                    this.close(true);
                    this.$message('操作成功！');
                }
            },
            handleSelectionChange(selection) {
                // console.log(selection);
            },
            handleRemove(it) {

                if(!it || !it.id) {
                    return;
                }

                for(let i = 0; i < this.selected.length; i++) {

                    let si = this.selected[i];
                    if(si && si.id == it.id) {
                        this.selected.splice(i, 1);
                        this.$nextTick(function () {
                            this.$refs.multipleTable.toggleRowSelection(it, false);
                        });
                        break;
                    }
                }

                for(let i = 0; i < this.currentSelected.length; i++) {

                    let si = this.currentSelected[i];
                    if(si && si.id == it.id) {
                        this.currentSelected.splice(i, 1);
                        this.$nextTick(function () {
                            this.$refs.multipleTable.toggleRowSelection(it, false);
                        });
                        break;
                    }
                }
            },
            formatSelected() {

                // 当前currentSelected 加入 selected
                this.selected = _.uniqBy(_.concat(this.currentSelected, this.selected), 'id');
                this.currentSelected = [];

                // 选取当前list 中被选中的元素（也在 selected 中）放入 currentSelected & selection
                if(this.selected && this.selected.length && this.list && this.list.length) {
                    for(let i = this.selected.length - 1; i >= 0; i--) {
                        let si = this.selected[i];
                        for(let j = 0; j < this.list.length; j++) {
                            let li = this.list[j];

                            if(si.id === li.id) {
                                this.currentSelected.unshift(li);
                                this.selected.splice(i, 1);

                                this.$nextTick(function () {
                                    this.$refs.multipleTable.toggleRowSelection(li, true);
                                });

                            }
                        }
                    }
                }
            },
            select(selection, row) {
                this.currentSelected = selection;
            },
            selectAll(selection) {
                this.currentSelected = selection;
            },
            close(flag) {
                this.$emit('close', flag);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .associate-table-wrap {
        border: 1px solid #EEE;

        thead .el-checkbox {
            margin-bottom:0px;
        }
    }
</style>
